<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP8266语音控制小车</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 400px;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 30px;
            font-size: 28px;
        }
        
        .status {
            background: #f0f0f0;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 30px;
            font-size: 18px;
            font-weight: bold;
        }
        
        .status.active {
            background: #4CAF50;
            color: white;
        }
        
        .controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .btn {
            padding: 20px;
            border: none;
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .btn-forward {
            background: #4CAF50;
            color: white;
        }
        
        .btn-backward {
            background: #f44336;
            color: white;
        }
        
        .btn-stop {
            background: #ff9800;
            color: white;
        }
        
        .voice-section {
            border-top: 2px solid #eee;
            padding-top: 30px;
        }
        
        .voice-btn {
            background: #2196F3;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px;
        }
        
        .voice-btn:hover {
            background: #1976D2;
            transform: scale(1.05);
        }
        
        .voice-btn.recording {
            background: #f44336;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .instructions {
            margin-top: 20px;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
        }
        
        .connection-status {
            margin-bottom: 20px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        
        .connected {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .disconnected {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-car"></i> ESP8266语音控制小车</h1>
        
        <div id="connection" class="connection-status disconnected">
            <i class="fas fa-wifi"></i> 正在连接小车...
        </div>
        
        <div id="status" class="status">
            当前状态: <span id="statusText">停止</span>
        </div>
        
        <div class="controls">
            <button class="btn btn-forward" onclick="sendCommand('forward')">
                <i class="fas fa-arrow-up"></i> 前进
            </button>
            <button class="btn btn-backward" onclick="sendCommand('backward')">
                <i class="fas fa-arrow-down"></i> 后退
            </button>
            <button class="btn btn-stop" onclick="sendCommand('stop')">
                <i class="fas fa-stop"></i> 停止
            </button>
        </div>
        
        <div class="voice-section">
            <h3>语音控制</h3>
            <button id="voiceBtn" class="voice-btn" onclick="startVoiceControl()">
                <i class="fas fa-microphone"></i> 开始语音控制
            </button>
            <div class="instructions">
                <p>点击按钮后，请说：</p>
                <p><strong>"前进"</strong> - 小车前进</p>
                <p><strong>"后退"</strong> - 小车后退</p>
                <p><strong>"停止"</strong> - 小车停止</p>
            </div>
        </div>
        
        <div id="result" style="margin-top: 20px; font-weight: bold; color: #2196F3;"></div>
    </div>

    <script>
        const carIP = "192.168.4.1"; // ESP8266 AP模式默认IP
        let isConnected = false;

        // 检查连接状态
        function checkConnection() {
            fetch(`http://${carIP}/`, { mode: 'no-cors', timeout: 2000 })
                .then(() => {
                    isConnected = true;
                    document.getElementById('connection').className = 'connection-status connected';
                    document.getElementById('connection').innerHTML = '<i class="fas fa-check-circle"></i> 已连接到小车';
                })
                .catch(() => {
                    isConnected = false;
                    document.getElementById('connection').className = 'connection-status disconnected';
                    document.getElementById('connection').innerHTML = '<i class="fas fa-times-circle"></i> 未连接到小车';
                });
        }

        // 发送控制命令
        function sendCommand(command) {
            if (!isConnected) {
                alert('请先连接到小车WiFi: ESP8266_Car');
                return;
            }

            fetch(`http://${carIP}/${command}`, { mode: 'no-cors' })
                .then(() => {
                    updateStatus(command);
                    document.getElementById('result').innerHTML = `已执行: ${getCommandText(command)}`;
                    setTimeout(() => {
                        document.getElementById('result').innerHTML = '';
                    }, 2000);
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('发送命令失败，请检查连接');
                });
        }

        // 更新状态显示
        function updateStatus(command) {
            const statusText = document.getElementById('statusText');
            const statusDiv = document.getElementById('status');
            
            switch(command) {
                case 'forward':
                    statusText.textContent = '前进';
                    statusDiv.className = 'status active';
                    break;
                case 'backward':
                    statusText.textContent = '后退';
                    statusDiv.className = 'status active';
                    break;
                case 'stop':
                    statusText.textContent = '停止';
                    statusDiv.className = 'status';
                    break;
            }
        }

        // 获取命令中文描述
        function getCommandText(command) {
            const commands = {
                'forward': '前进',
                'backward': '后退',
                'stop': '停止'
            };
            return commands[command] || command;
        }

        // 语音控制
        function startVoiceControl() {
            if (!('webkitSpeechRecognition' in window)) {
                alert('您的浏览器不支持语音识别功能');
                return;
            }

            const recognition = new webkitSpeechRecognition();
            recognition.lang = 'zh-CN';
            recognition.continuous = false;
            recognition.interimResults = false;

            const voiceBtn = document.getElementById('voiceBtn');
            voiceBtn.classList.add('recording');
            voiceBtn.innerHTML = '<i class="fas fa-microphone-slash"></i> 正在聆听...';

            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript;
                console.log('识别结果:', transcript);
                
                let command = null;
                if (transcript.includes('前进')) {
                    command = 'forward';
                } else if (transcript.includes('后退')) {
                    command = 'backward';
                } else if (transcript.includes('停止')) {
                    command = 'stop';
                }

                if (command) {
                    sendCommand(command);
                    document.getElementById('result').innerHTML = `语音识别: "${transcript}" → 执行 ${getCommandText(command)}`;
                } else {
                    document.getElementById('result').innerHTML = `未识别的命令: "${transcript}"`;
                }
            };

            recognition.onerror = function(event) {
                console.error('语音识别错误:', event.error);
                document.getElementById('result').innerHTML = '语音识别失败，请重试';
            };

            recognition.onend = function() {
                voiceBtn.classList.remove('recording');
                voiceBtn.innerHTML = '<i class="fas fa-microphone"></i> 开始语音控制';
            };

            recognition.start();
        }

        // 定期检查连接状态
        checkConnection();
        setInterval(checkConnection, 5000);
    </script>
</body>
</html>
